<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛--看贴</TITLE>
	<Link rel="stylesheet" type="text/css" href="style/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>
</HEAD>

<BODY>
<div id="app">
	<bbs>
		<!--      主体        -->
		<DIV style="width: 100%"><br/>
			<!--      导航        -->
			<DIV>
				&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
				<B><a href="list.html">灌水乐园</a></B>
			</DIV>
			<br/>
			<!--      回复、新帖        -->
			<DIV>
				<A href="post.html"><IMG src="image/reply.gif"  border="0" id=td_post></A>
				<A href="post.html"><IMG src="image/post.gif"   border="0" @click.prevent="openPost"></A>
			</DIV>
			<!--         翻 页         -->
			<DIV>
				<a href="detail.html">上一页</a>|
				<a href="detail.html">下一页</a>
			</DIV>
			<!--      本页主题的标题        -->
			<DIV>
				<TABLE cellSpacing="0" cellPadding="0" width="100%">
					<TR>
						<TH class="h">本页主题: 灌水</TH>
					</TR>
					<TR class="tr2">
						<TD>&nbsp;</TD>
					</TR>
				</TABLE>
			</DIV>

			<div style="height: 500px; overflow-y: auto"
				 v-infinite-scroll="load"
				 :infinite-scroll-delay="500"
				 :infinite-scroll-distance="100">
				<!--      主题        -->

				<DIV class="t">
					<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">
						<TR class="tr1">
							<TH style="width: 150px">
								<B>{{topic.user.cname}}</B><BR/>
								<el-avatar :src="topic.user.head"></el-avatar><BR/>
								注册:{{topic.user.regtime}}<BR/>
							</TH>
							<TH>
								<H4>{{topic.title}}</H4>
								<DIV v-html="topic.content"></DIV>
								<DIV class="tipad gray">
									发表：{{topic.publishtime}} &nbsp;
									最后修改:{{topic.modifytime}}
								</DIV>
							</TH>
						</TR>
					</TABLE>
				</DIV>

				<!--      回复        -->

				<DIV class="t" v-for="r in replys">
					<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">
						<TR class="tr1">
							<TH style="width: 150px">
								<B>{{r.user.cname}}</B><BR/>
								<el-avatar :src="r.user.head"></el-avatar><BR/>
								注册:{{r.user.regtime}}<BR/>
							</TH>
							<TH>
								<H4>{{r.title}}</H4>
								<DIV v-html="r.content"></DIV>
								<DIV class="tipad gray">
									发表：{{r.publishtime}} &nbsp;
									最后修改:{{r.modifytime}}
								</DIV>
							</TH>
						</TR>
					</TABLE>
				</DIV>
			</div>
		</DIV>
	</bbs>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			topic:{user:{}},
			replys:[],
			page: 1
		},
		created() {
			axios.get("topic/queryById"+location.search)
					.then(res=>this.topic = res.data);
		},
		methods : {
			load(){
				if(this.page == 0){
					return;
				}
				axios.get("reply/queryByTid"+location.search.replace("id","tid"),{
					params:{page:this.page,
						rows:5
					}
				}).then(res=> {
					// this.replys.push(res.data.records);
					this.replys = this.replys.concat(res.data.records);
					if(res.data.records.length == 5){
						this.page ++;
					} else {
						this.page = 0;
					}
				});
			},
			openPost(){
				location.href = "post.html?id=" + this.topic.boardid;
			}
		}
	})
</script>
</BODY>
</HTML>